<template>
    <div id='' class='upLoad'>
        <div class="but_group">
            <Upload :show-upload-list="false" :before-upload="beforeUpload" action="">
                <Button v-if="!watch" type="primary" ghost>上传附件</Button>
            </Upload>
            <Button v-if="!watch" type="primary" @click="metronomeShow" ghost>高拍仪上传</Button>
            <Button type="primary" ghost @click="packDownload">打包下载</Button>
        </div>
        <div class="file_table">
            <Table :columns="columns" :data="fileList">
                <template slot-scope="{ row }" slot="action">
                    <div class="btn_content">
                        <Button v-if="!watch" type="primary" size="small" ghost @click="rename(row)">重命名</Button>
                        <Button v-if="row.ext == 'pdf' || row.ext == 'PDF'||row.ext == 'jpg' || row.ext == 'JPG' || row.ext == 'png' || row.ext == 'PNG'" type="primary" size="small" ghost @click="watchInfo(row)">查看</Button>
                        <Button type="primary" size="small" ghost @click="download(row)">下载</Button>
                        <Button v-if="!watch" type="error" size="small" ghost @click="remove(row)">删除</Button>
                    </div>
                </template>
            </Table>
        </div>
        <Modal title="预览" v-model="visible" width='1300px' :mask-closable="false">
            <div style="height:600px;max-height:600px;overflow-y: auto;padding:90px">
                <img :src="showUrl" v-if="visible && isImg" style="width: 100%">
                <iframe v-if="visible && !isImg" :src="showUrl" frameborder="0" class="i-frame-iframe" style="width: 100% !important; height: 85% !important; top: 7% !important; left: 0% !important;"></iframe>
            </div>
            <template #footer>
                <Button @click="closeShow">关闭</Button>
            </template>
        </Modal>
        <Modal title="预览" v-model="isEditName" width='400px'>
            <div>
                <Form :model="formEdit" :label-width="80">
                    <FormItem label="文件名称">
                        <Input v-model="formEdit.fileName" placeholder="请输入"></Input>
                    </FormItem>
                </Form>
            </div>
            <template #footer>
                <Button @click="closeName">关闭</Button>
                <Button @click="saveName" type="primary" style="margin-left:20px">保存</Button>
            </template>
        </Modal>
        <Metronome v-if="isCloseMetronome" ref="metronome" @closeMetronome="closeMetronome" @sureSelectMetronome="sureSelectMetronome" />
    </div>
</template>
<script>
import { UpLoad } from '@/mixins/uploadMixins.js'
import Metronome from './metronome.vue'
export default {
    name: '',
    mixins: [UpLoad],
    props: ['watch', 'api', 'carry'],
    data() {
        return {
            config: window.config,
            isCloseMetronome: false,
            columns: [
                { type: 'selection', width: 60, align: 'center' },
                { title: '文件名称', key: 'resourceName' },
                { title: '操作', slot: 'action', width: 350, align: 'center' }
            ],

        };
    },
    components: { Metronome },
    computed: {},
    beforeMount() { },
    mounted() {
        this.$api = this.$Api.get([this.api])
        // this.renderTable()
    },
    methods: {
        closeMetronome() {
            this.isCloseMetronome = false
        },
        metronomeShow() {
            this.isCloseMetronome = true
            this.$nextTick(() => {
                this.$refs.metronome.showHide()
            })
        },
        sureSelectMetronome(_allData) {
            // 确定后返回数据
            this.setFile(_allData)
        }
    },
    watch: {}
}
</script>
<style>
</style>
<style lang='less' scoped>
@btnSpace: 15px;
.upLoad {
    width: 100%;
    .but_group {
        display: flex;
        height: 48px;
        align-items: center;
        .ivu-upload {
            button {
                margin-left: 0px !important;
            }
        }
        button:not(:first-child) {
            margin-left: @btnSpace;
        }
    }
    .file_table {
        .btn_content {
            display: flex;
            justify-content: center;
            align-items: center;
            button:not(:first-child) {
                margin-left: @btnSpace;
            }
        }
    }
}
</style>